<template>
  <div class="goods-sku">
    <dl v-for="(item, index) in goodsInfo.specs" :key="index">
      <dt>{{ item.name }}</dt>
      <dd>
        <template v-for="(i, index2) in item.values" :key="index2">
          <img
            @click="selectClick(i, item.values)"
            :class="{ selected: i.selected, disabled: i.disabled }"
            v-if="i.picture"
            :src="i.picture"
            alt=""
          />
          <span
            :class="{ selected: i.selected, disabled: i.disabled }"
            @click="selectClick(i, item.values)"
            v-else
            >{{ i.name }}</span
          >
          <!-- <img
            class="disabled"
            src="https://yanxuan-item.nosdn.127.net/d77c1f9347d06565a05e606bd4f949e0.png"
            alt=""
          /> -->
        </template>
      </dd>
    </dl>
  </div>
</template>
<script>
/*
拿到所有有货属性的对象集合（拿到数据字典）
1：商品详情中的skus集合内的属性specs内的对象转换成字符串（只有valueName）
2:再将属性数组的所有组合拿到
3：存储到一个对象中
*/
import btPowerSet from '@/vender/btPowerSet'
function skuPaths (arr) {
  console.log('skus:', arr)
  const _resultObj = {}
  arr.forEach(item => {
    //   有库存才处理
    if (item.inventory) {
      let _newArr = item.specs.map(item2 => item2.valueName)
      const _tempArr = btPowerSet(_newArr)
      _tempArr.forEach(i => {
        const _key = i.join('***')
        _resultObj[_key] = true
      })
    }
  })
  return _resultObj
  console.log('result:', _resultObj)
}
/*
将每个属性传入数据字典验证，如果数据字典中不存在，就设置disabled=true
1:拿到商品属性集合
2：将属性传入数据字典验证
3：设置相应的disabled值
*/
/*
用户点击某属性后，验证其它属性到底有没有货，是否需要禁用
1：拿到用户已选择属性
2：通过循环处理已选择数据在数据字典中查询 是否该禁用该属性

*/

function updateDisabled (arr, paths) {
  // 循环属性集
  arr.forEach((item, index) => {
    //   拿到用户已选择数据
    const _userSelectArr = userSelected(arr) // [(黑色, 日本, undefined)]
    //   每一行属性再次循环
    item.values.forEach(item2 => {
      // 已选择属性无须判断
      if (_userSelectArr[index] === item2.name) {
        return
      } else {
        //   如果黑色没选择，就让已选择数据的第一项值为黑色
        _userSelectArr[index] = item2.name
        const _str = _userSelectArr
          .filter(v => {
            return v
          })
          .join('***') // 黑色***日本
        //   如果数据字典中查询不到就禁用该项
        item2.disabled = !paths[_str]
      }
      // 拿到单个属性进行处理
      //    item2.disabled = !paths[item2.name]
    })
  })
}
/*
拿到用户已选择的商品属性
循环数组拿到每一项的selected属性，如果为true,就存储起来
*/

function userSelected (arr) {
  const _temp = []
  arr.forEach((item, index) => {
    //   如果找到当前行已选择项，_result就是当前项数据，如果没找到，_result=undefined
    const _result = item.values.find(item2 => {
      return item2.selected === true
    })
    _temp[index] = _result ? _result.name : undefined
  })
  return _temp
}
/*
拿到用户已选择项对应的sku详情数据
1：拿到用户已选择项
2：验证已选择已完成
3：在skus数据集合中匹配上当前选择项
4:通知父级已选择数据
*/

// arr:当前的属性集  skus:当前的sku数据集  emit:用于子传父的emit
function getUserSku (arr, skus, emit) {
  // 拿到用户选择项
  const _userSelected = userSelected(arr) //   [黑色,中国,10cm]
  // 验证用户已选择完成
  if (_userSelected.filter(v => v).length === arr.length) {
    const _result = skus.find(item => {
      let _localStr = item.specs.map(item2 => item2.valueName).join('***')
      let _userStr = _userSelected.join('***')
      return _localStr === _userStr
    })
    if (_result) {
      emit('change', _result)
      // console.log(_result)
    }
  }
}

export default {
  name: 'GoodsSku',
  props: ['goodsInfo'],
  setup (props, { emit }) {
    props.goodsInfo.specs.forEach(item => {
      item.values.forEach(item2 => {
        item2.selected = false
        item2.disabled = false
      })
    })
    // 属性点击事件
    function selectClick (i, arr) {
      // 如果禁用不可点击
      if (i.disabled) {
        return
      }
      //   如果  i.selected为false 让i.selected为true,清空其它所有当前行的选择,如果为true,只改当前项selected为false
      if (!i.selected) {
        arr.forEach(item => {
          item.selected = false
        })
      }
      i.selected = !i.selected
      //   //   获取选择结果
      //   userSelected(props.goodsInfo.specs)
      //  每一次按钮点击都更新一次禁用状态
      updateDisabled(props.goodsInfo.specs, allPaths)
      // 每一次用户点击都进行验证用户所选择项是否选择完成，查询 出对应的sku数据
      getUserSku(props.goodsInfo.specs, props.goodsInfo.skus, emit)
    }
    // 拿到数据字典
    const allPaths = skuPaths(props.goodsInfo.skus)
    // 进入页面就更新一次按钮禁用状态
    updateDisabled(props.goodsInfo.specs, allPaths)
    return { selectClick }
  }
}
</script>
<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      line-height: 40px;
      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
